<template>
  <div id="app">
    <drop-down-list v-model="selectedValues.firstSelectValue"
                    v-bind:dataSource="dropDownListOptions.dataSource"></drop-down-list>
    <drop-down-list v-model="selectedValues.secondSelectedValue"
                    v-bind:dataSource="dropDownListOpts2.dataSource"></drop-down-list>
    <button v-on:click="changeFirstValue">修改第一个select的值为2</button>
    <button v-on:click="changeFirstDataSource">将第一个的数据源修改为 /dropDownListData2</button>
    <tztech-table></tztech-table>
  </div>
</template>

<script type="text/babel">

  import dropDownList from "./components/kendoDropDownList.vue"

  import tztechTable from "./components/tztechTable.vue" // https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md


  let dropDownListOptions = {
    value: 2,
    dataSource: {
      url: "http://localhost:3000/dropDownListData",
      method: "GET",
      dataTextField: "key",
      dataValueField: "value"
    }
  };

  let dropDownListOpts2 = {
    dataSource: {
      data: [
        {key: "option1", value: 1},
        {key: "option2", value: 2}
      ],
      dataTextField: "key",
      dataValueField: "value"
    },
    value: 2
  };
  let selectedValues = {
    firstSelectValue :1,
    secondSelectedValue: 2
  };

  let data = function () {
    return {
      dropDownListOptions,

      dropDownListOpts2,
      selectedValues
    }
  };

  function changeFirstValue(){
    this.selectedValues.firstSelectValue = 2;
  }

  function changeFirstDataSource(){
    this.dropDownListOptions.dataSource = {
      url: "http://localhost:3000/dropDownListData2",
      method: "GET",
      dataTextField: "key",
      dataValueField: "value"
    }
  }

  export default {
    name: 'app',
    components: {
      dropDownList,
      tztechTable
    },
    methods: {
      changeFirstValue,
      changeFirstDataSource
    },
    data
  }

</script>
